<template>
  <div>
    <p>{{ num }}</p>
    <hr />
    <p>{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 10,
    };
  },
  // 计算属性,通过computed
  // 计算属性一定是依赖于其他的vue变量得来
  //计算属性的键名不能与data里的声明vue变量重名
  computed: {
    //  键名代表计算属性的名称
    total() {
      return this.num * 10;
    },
  },
};
</script>

<style>
</style>